<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="梦想星辰大海">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>JDoc</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body style="background-color: #f5f5f5;">
    <fieldset class="layui-elem-field" style="width: 380px; margin:0 auto; margin-top: 10%; box-shadow: 0 0 10px #d9edf7;">
        <legend>
           	个人信息
        </legend>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    账号
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="username" value="张三" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    	密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" name="password" value="123456" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="signin">
                        立即提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </fieldset>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
        /**
         * 对layui进行全局配置
         */
        layui.config({
            base: 'js/'
        });

        layui.use('form', function() {
            //监听提交
            layui.form().on('submit(signin)', function(data){
                layer.msg(JSON.stringify(data.field));
                //这里可以发起ajax请求进行登录验证
                return false;
            });

            //修正登录框margin
            var fieldset = layui.jquery("fieldset").eq(0);
            fieldset.css("margin-top", (layui.jquery(window).height() - fieldset.height()) * 0.3 + "px");
        });
    </script>
</body>
</html>